<template>
    <!-- 新增/编辑用户 -->
    <el-drawer
        v-model="userParams.visible"
        :title="dialogTitle"
        @open="handleOpen"
        size="600"
        :close-on-click-modal="true"
    >
        <div class="drawer-main" v-loading="loading">
            <div class="topFrom">
                <div class="titel">选择APK版本</div>
                <el-form ref="ruleFormRef" :model="formData" label-width="100">
                    <el-row gutter="24">
                        <!-- APK版本号 -->
                        <el-col :span="24">
                            <el-form-item label="版本号" prop="version">
                                <el-input
                                    v-model="formData.version"
                                    maxlength="60"
                                    placeholder="请输入APK版本号"
                                    clearable
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row gutter="24">
                        <!-- APK版本描述 -->
                        <el-col :span="24">
                            <el-form-item label="版本描述" prop="description">
                                <el-input
                                    v-model="formData.description"
                                    maxlength="60"
                                    placeholder="请输入版本描述"
                                    clearable
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="fileName" style="padding: 0 50px">
                    <input
                        type="file"
                        accept=".apk"
                        @change="handleFileChange"
                    />
                    <div v-if="apkInfo">
                        <p><strong>文件名称:</strong> {{ apkInfo.name }}</p>
                        <p><strong>文件大小:</strong> {{ apkInfo.size }} MB</p>
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="emit('close')">取消</el-button>
                <el-button type="primary" @click="handleSubmit">上传</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { postSmhx } from './api'

const props = defineProps({
    userParams: {
        type: Object,
        default: () => {},
        required: true
    }
})
const formData = reactive({
    version: '',
    description: ''
})
const apkInfo = ref(null)
const fileList = ref(null)
const handleFileChange = (event) => {
    const file = event.target.files[0]
    fileList.value = file
    if (file && file.type === 'application/vnd.android.package-archive') {
        // 如果文件是 APK 格式
        apkInfo.value = {
            name: file.name,
            size: (file.size / 1024 / 1024).toFixed(2)
        }
    } else {
        // 如果选择的文件不是 APK 格式
        apkInfo.value = null
        alert('请选择有效的 APK 文件')
    }
}
const emit = defineEmits(['close'])

const loading = ref(false)
const dialogTitle = '上传'

const handleSubmit = () => {
    handleSave()
}
const ruleFormRef = ref(null)
const handleSave = async () => {
    console.log(fileList.value)
    try {
        loading.value = true
        const formDataobj = new FormData()
        formDataobj.append('apk', fileList.value)
        formDataobj.append('version', formData.version)
        formDataobj.append('description', formData.description)
        const res = await postSmhx(formDataobj)
        if (res?.code === 200) {
            ElMessage.success('新增成功')
            emit('close', true)
        }
    } catch (error) {
        console.error('Request error:', error)
    }
    loading.value = false
}

// 初始化弹窗
const handleOpen = () => {
    nextTick(() => {
        ruleFormRef.value.resetFields()
        // deptOptions.value = props.userParams.deptOptions
        // let row = props.userParams.row
        // // 编辑
        // formData.userName = row.userName
        // formDataJueSe.salesLevel = row.salesLevel
        // formDataJueSe.groupLeader = row.groupLeader
        console.log('初始化')
    })
}
</script>

<style lang="less" scoped>
.titel {
    width: 100%;
    height: 60px;
    padding: 0 10px;
    line-height: 60px;
    color: #0a0a0a;
    font-weight: 600;
    font-size: 14px;
    position: relative;
}

.titel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 5px;
    border-radius: 10px;
    background-color: #1943ff;
}

.titleFrom {
    width: 100%;
}

.tablePadding {
    padding: 0 20px;
}

.leftTable {
    width: 45%;
    height: 550px;
    float: left;

    .title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        font-size: 14px;
        color: #0a0a0a;
        font-weight: 600;
        border: 1px solid #eee;
    }
}

.contentTabale {
    width: 10%;
    height: 480px;
    float: left;

    .top {
        width: 100%;
        height: 150px;
        position: relative;

        .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -30px;
            margin-top: 10px;
        }
    }
}

.rightTable {
    width: 45%;
    height: 480px;
    float: right;

    .title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        font-size: 14px;
        color: #0a0a0a;
        font-weight: 600;
        border: 1px solid #eee;
    }
}
</style>
